<template>
  <view>
    <view v-for="(value,key,index) of spu.skuprops">
      <view>{{key}}</view>
      <view class="flex">
        <view v-for="(item,index1) of value" @tap="selectThis(key,item)">
          <view :class="resultObj[key]==item?'selected':''">
            {{item}}
          </view>
        </view>
      </view>
    </view>

    <view>{{resultObj}}</view>
    <view>{{price}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        resultObj: {},
        price: "",
        spu: {
          //spu的其他一些信息
          skuprops: {
            "颜色": ["黑色", "红色", "白色"],
            "网络类型": ["4G", "5G"]
          }
        },
        skuObj: {}, //用来存储detail和price的对应关系
        skulist: [{
            "id": 1,
            "spuId": 1,
            "detail": "{\"颜色\":\"红色\",\"网络类型\":\"4G\"}",
            "stock": 99,
            "price": 1999,
            "createTime": "2020-03-26T12:42:32.000+0000",
            "updateTime": "2020-03-26T12:42:36.000+0000",
            "operator": "admin",
            "zt": "1"
          },
          {
            "id": 2,
            "spuId": 1,
            "detail": "{\"颜色\":\"白色\",\"网络类型\":\"4G\"}",
            "stock": 9998,
            "price": 2099,
            "createTime": "2020-03-26T12:43:43.000+0000",
            "updateTime": "2020-03-26T12:43:45.000+0000",
            "operator": "admin",
            "zt": "1"
          },
          {
            "id": 3,
            "spuId": 1,
            "detail": "{\"颜色\":\"黑色\",\"网络类型\":\"4G\"}",
            "stock": 0,
            "price": 2299,
            "createTime": "2020-03-26T12:44:30.000+0000",
            "updateTime": "2020-03-26T12:44:33.000+0000",
            "operator": "admin",
            "zt": "1"
          }
        ]
      }
    },
    methods: {
      isThis(key, item) {
        return this.resultObj[key] == item
      },
      selectThis(key, value) {
        this.resultObj[key] = value
        this.price = this.skuObj[JSON.stringify(this.resultObj)]
        this.$forceUpdate()
      },
      splitStr(e) {
        console.log(e)
        return e.toString().split(',')
      }
    },
    onLoad() {
      //先处理后台返回的数据
      for (let obj of this.skulist) {
        this.skuObj[obj.detail] = obj.price
        let detailObj = JSON.parse(obj.detail)
      }
      console.log(this.skuObj)

      for (let obj in this.spu.skuprops) {
        this.resultObj[obj] = ""
      }

      console.log(this.resultObj)

    }
  }
</script>

<style>
  .selected {
    border: 1px solid red;
    background-color: gray;
    color: red;
  }

  .flex {
    display: flex;
    justify-content: space-around;
  }
</style>
